<template>
  <div>
    <PdfView :isShow="isShow" :title="pdfTitle" :action="pdfUrl" @updateShow="updateShow"/>
    <el-button @click="readPdf">查看PDF</el-button>
    <div class="lottie" id="lottie">
      q23
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import PdfView from '../../components/PDF/index.vue';
import lottie from "lottie-web";
import LoadingJson from "../../assets/lottie/pie.json";
const tokens = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLnrqHnkIborqTor4HkuK3lv4MiLCJpYXQiOjE2Njg2NzY1MTYuNjI1Mjg2OCwiZXhwIjoxNjY5MjgxMzE2LjYyNTI4NjgsImp0aSI6IjExLzE3LzIwMjIgMDk6MTU6MTYiLCJhdWQiOiJiODJiYmI3MC1jOGViLTRjYWEtYTY5MS00MmViMjM3Y2QwZmYiLCJzb3VyY2UiOiJQQyJ9.dqawVsuoFlPR6w8RFgIAuYpNyzXEeo_eXXowNzd4wpk'
const isShow = ref(false);
const pdfTitle = ref('PDF预览');
const pdfUrl = ref('');

onMounted(()=>{
  console.log(isShow.value,'fu')
  lottie.loadAnimation({
    container: document.querySelector("#lottie") as Element,  //进行播放的元素
    renderer: "svg",
    loop: true,  //循环播放
    autoplay: true,  //自动播放
    animationData: LoadingJson,  //要播放的文件
  });
  jsonAnimation.play();
})
const updateShow = () =>{
  isShow.value = false;
}
const readPdf = () => {  
  axios({
    url: 'http://192.168.199.21:7109/Transition/api/services/Transition/Pdf/GetStatisticsPDF',
    method: 'get',
    // params: { token: "tokens" },
    responseType: 'blob',
    headers: {
      token: tokens,
    },
  })
    .then((res) => {
      if (res.status == 200) {
        console.log(res);
        const blob = new Blob([res.data], {
          type: 'application/pdf',
        });
        console.log(URL.createObjectURL(blob));
        
        sessionStorage.setItem('downLoadFileName','统计分析报表');
        pdfUrl.value = URL.createObjectURL(blob);
        isShow.value = true;
      }
    })
    .catch((res) => {});
};
</script>

<style scoped>
.lottie{
  width: 300px;
  height: 200px;
  border: 1px solid #eeeeee;
  background-color: #eeeeee;
}
</style>
